1장. 말로 시켜서 첫 웹페이지 만들기

출처: 『혼자 공부하는 바이브 코딩 with 클로드 코드』(조태호) | 예제 코드: github.com/taehojo/vibecoding

코드는 분위기만 — HTML, CSS, 자바스크립트 같은 말은 몰라도 됩니다. 표의 '비유'와 '위험'만 봐도 충분해요.

이 장에서 처음으로 직접 만들어 본다.

코드는 한 줄도 안 친다.

AI에게 말로 시키고, 화면을 보고, 다시 말로 고친다.

그게 전부다.

0. 이 장의 새 단어

0장 용어집에 없는 말이 이 장에 셋 나온다.

여기서 먼저 풀어 둔다. 본문에서 막히면 여기로 돌아오면 된다.

(나머지 어려운 말 — 바이브 코딩, LLM, 프롬프트, 아티팩트, 커스터마이즈 — 은 모두 0장 용어집에 있다.)

전용 모델형

한 문장 뜻 — 특정 AI 모델 하나를 내 컴퓨터에 직접 깔아 쓰는 코딩 도구 방식.

일상비유 — 택시를 부르는 대신 내 차를 사는 것. 매번 빌릴 필요 없고, 내 짐(파일)을 직접 싣고 다닌다.

한 줄 예 —

# 클로드 코드가 바로 이 전용 모델형이다
# 내 컴퓨터에 깔면 내 파일을 직접 만들고 고친다

게시(publish)

한 문장 뜻 — 내가 만든 작품을 인터넷에 올려, 링크 하나로 남에게 보여 주는 기능.

일상비유 — 그린 그림을 액자에 넣어 벽에 거는 것. 링크는 "이 그림 보러 와"라고 알려 주는 주소다.

한 줄 예 —

# 게시하면 주소가 하나 생긴다
# 그 주소를 받은 사람은 누구나 내 페이지를 본다
link = artifact.publish()  # https://... 같은 링크가 나온다

트랜스포머(Transformer)

한 문장 뜻 — 문장에서 중요한 단어에 집중해 뜻을 알아내는, 오늘날 AI의 뼈대가 된 구조.

일상비유 — 통역사. 긴 말 속에서 핵심 단어를 골라 듣고, 그걸 중심으로 옮긴다.

한 줄 예 —

# 클로드, ChatGPT 같은 LLM이 다 이 위에서 자랐다
# 2017년 구글이 처음 발표했다 (외워 둘 필요는 없다)

이 장에서 딱 3가지만

이 장에서 딱 3가지만

  1. 바이브 코딩은 코드를 직접 안 쓰고 AI와 말로 만든다. 그 도구는 세 종류로 나뉜다.
  2. 클로드 아티팩트로 코드 한 줄 없이 첫 웹페이지를 만들고, 게시해서 남에게 보여 줄 수 있다.
  3. 프롬프트가 구체적일수록 결과가 좋아진다. 한 번에 안 끝내고, 말로 계속 고쳐 나간다.

1. 바이브 코딩이 뭔데?

막히는 장면

"코딩을 배우려면 영어 같은 문법부터 몇 달은 외워야 하는 거 아니야?"

이렇게 지레 포기한 적 있죠?

그런데 요즘은 코드를 한 줄도 안 쓰고, AI에게 "이런 거 만들어 줘"라고 말만 해도 프로그램이 나온다.

그 새로운 방식이 바로 바이브 코딩이다.

비유 먼저 — 요리 못 하는 사람과 요리사

요리를 전혀 못 하는 사람이 요리사에게 말한다.

"오늘 더우니까 시원한 파스타 해 줘."

요리사가 알아서 만들어 온다.

맛보고 "좀 더 짜게"라고 고친다.

레시피도, 불 조절도 몰라도 된다.

이게 바이브 코딩이다.

비유 코드 위험
"파스타 해 줘"라고 말함 ai.ask("계산기 만들어 줘") 너무 막연하면 엉뚱한 게 나옴
맛보고 "더 짜게" 수정 ai.ask("버튼을 더 크게 해 줘") 안 보고 그냥 믿으면 틀린 채 굳음

한 문장 정의

바이브 코딩은 코드를 직접 타이핑하는 대신, AI와 대화하며 만들고·확인하고·고치는 새로운 개발 방식이다.

예시 폭격

예시 1 (완성예 — 그대로 따라 읽기)

전통적 코딩과 바이브 코딩은 이렇게 다르다.

# 전통적 코딩 — 내가 다 적는다
# 1. 레시피(문법)를 외운다
# 2. 재료(코드)를 한 줄씩 직접 친다
# 3. 불 조절(오류 수정)도 내가 한다

# 바이브 코딩 — AI에게 말로 시킨다
ai.ask("계산기 프로그램 만들어 줘")

전통적 코딩은 내가 요리사다.

바이브 코딩은 AI가 요리사고, 나는 손님이다.

예시 2 (부분완성 — 빈칸 채우기)

아래 빈칸에 들어갈 말을 떠올려 보자.

# 손님이 요리사에게 주문하듯, AI에게 말로 시킨다
ai.ask("________ 만들어 줘")   # 빈칸: 만들고 싶은 것

빈칸에는 "시작 페이지", "할 일 목록", "계산기" 같은 게 들어간다.

답은 "내가 원하는 무엇이든".

예시 3 (독립적용 — 직접 판단)

다음 둘 중 어느 쪽이 바이브 코딩일까?

(가) 책을 펴 놓고 코드 문법을 한 줄씩 외워 직접 타이핑한다.

(나) "오늘 날씨 보여 주는 페이지 만들어 줘"라고 AI에게 말한다.

답은 (나)다.

(가)는 전통적 코딩이다.

미니 시나리오 — 이럴 때 이렇게

AI가 만든 결과가 마음에 안 든다.

이럴 때는 처음부터 다시 안 한다.

그냥 말로 고친다.

"색을 더 밝게 해 줘", "글씨를 더 크게 해 줘".

맛보고 간을 맞추듯이.

2. AI 코딩 도구는 세 종류

막히는 장면

"AI로 코딩한다는데, 그게 다 같은 건가? 뭘 골라야 하지?"

이렇게 헷갈린 적 있죠?

AI 코딩 도구는 크게 셋으로 나뉜다.

각각 쓰는 자리가 다르다.

비유 먼저 — 택시 vs 렌터카 vs 내 차

이동 수단에 빗대면 한눈에 들어온다.

택시는 그냥 타면 된다. 가장 쉽다.

렌터카는 원하는 차를 고를 수 있다. 대신 렌트비와 기름값을 둘 다 낸다.

내 차는 한 번 사면 추가 비용이 없다. 대신 처음에 사는 수고가 있다.

비유 코드(도구) 위험
택시 — 그냥 탐 웹 기반 챗봇 (ChatGPT, 클로드 웹) 내 컴퓨터 파일을 직접 못 만짐, 복붙 번거로움
렌터카 — 골라 탐 모델 선택형 (커서, 리플릿, 윈드서프) 도구값 + 모델값 이중 부담
내 차 — 사서 탐 전용 모델형 (클로드 코드, 제미나이 CLI) 처음 설치하는 수고가 필요

한 문장 정의

AI 코딩 도구는 설치 없는 웹 챗봇에서, 모델을 골라 쓰는 편집기를 거쳐, 내 컴퓨터에 깔아 파일까지 다루는 전용 모델형으로 깊어진다.

이 책은 그중 전용 모델형인 클로드 코드를 주로 다룬다.

(전용 모델형은 위 '0. 이 장의 새 단어'에 풀어 두었다.)

예시 폭격

예시 1 (완성예)

세 유형을 한 표로 견주면 이렇다.

항목 웹 기반 챗봇 모델 선택형 전용 모델형
대표 도구 ChatGPT, 클로드 웹 커서, 리플릿 클로드 코드, 제미나이 CLI
설치 불필요 필요 필요
비용 모델값만 도구 + 모델 이중 모델 사용료만
내 파일 접근 불가 가능 가능
시작하기 가장 쉬움 보통 보통

지금은 "셋 중 클로드 코드가 내 차"라는 것만 기억하면 된다.

예시 2 (부분완성)

빈칸에 도구 유형을 채워 보자.

설치가 필요 없고 웹에서 바로 쓰는 건 → ____ (답: 웹 기반 챗봇)

내 컴퓨터에 깔아 파일을 직접 만지는 건 → ____ (답: 전용 모델형)

예시 3 (독립적용)

"커서(Cursor)는 여러 모델을 골라 쓸 수 있다."

이 도구는 세 유형 중 무엇일까?

답은 모델 선택형이다.

'모델을 고른다'가 핵심 단서다.

미니 시나리오 — 이럴 때 이렇게

프로그래밍이 처음이라 설치가 부담스럽다.

이럴 때는 웹 기반 챗봇(클로드 웹)으로 시작한다.

이 장의 실습이 바로 그것이다.

나중에 더 깊이 가고 싶으면 전용 모델형으로 넘어간다.

3. 클로드 아티팩트로 첫 웹페이지 만들기

막히는 장면

"웹페이지를 만들려면 HTML이며 CSS며 다 배워야 하는 거 아니야?"

이렇게 막막한 적 있죠?

아니다.

클로드의 아티팩트 기능을 쓰면, 코드 한 줄 없이 페이지가 만들어진다.

화면 오른쪽에서 실제로 도는 모습까지 바로 보인다.

비유 먼저 — 옷 가게 전신 거울

아티팩트는 옷 가게의 전신 거울 같다.

말로 "밝은 색 셔츠 보여 줘" 하면, 거울에 입은 모습이 바로 뜬다.

"이건 별로네, 저걸로" 하고 바로 바꿔 볼 수 있다.

대화창은 점원과의 대화, 아티팩트는 거울 속 내 모습이다.

비유 코드 위험
거울에 입은 모습이 뜸 artifact.show(생성된_페이지) 미리보기만 보고 게시 안 하면 남에게 못 보여 줌
거울 보고 "저걸로" 교체 ai.ask("색을 밝게 바꿔 줘") 안 보고 믿으면 엉뚱한 채로 굳음

한 문장 정의

아티팩트는 클로드가 코드를 만들고 그 결과를 바로 미리 보여 주는 작업 공간(대화창 옆 패널)이다.

(아티팩트는 0장 용어집에도 있다.)

실습 — 나만의 시작 페이지 만들기

여섯 걸음이면 끝난다.

한 걸음씩 천천히 따라가면 된다.

걸음 1 — 클로드 가입

1. https://claude.ai 접속
2. [Google로 계속하기] 클릭 (가장 쉽다)
3. "환영합니다" 화면이 뜨면 성공

걸음 2 — 아티팩트 열기

1. 왼쪽 사이드바에서 [아티팩트] 아이콘 클릭
2. [+ 새 아티팩트] 버튼 클릭
3. [앱 및 웹사이트] 선택

걸음 3 — 프롬프트 한 줄 입력

"오늘의 날씨와 주요 뉴스를 보여 주는
 나만의 시작 홈페이지를 만들고 싶어."

Enter를 누르면 클로드가 즉시 코드를 만든다.

시계, 날씨, 뉴스, 검색까지 든 완성품이 오른쪽 거울에 뜬다.

걸음 4 — 더 구체적으로 다시 시키기

"밝고 깔끔한 스타일을 선호해. 시계와 검색바도 추가해 줘.
 기술 관련 뉴스를 보여 줘."

클로드가 만들 계획을 먼저 보여 준다.

"이 계획대로 시작해 줘"라고 답하면 제작이 시작된다.

걸음 5 — 게시해서 남에게 보여 주기

1. 아티팩트 위쪽 [게시] 버튼 클릭
2. [게시 및 링크 복사] 클릭
3. 그 링크를 브라우저에 붙여넣기 → 완성

주의 — 게시하면 링크를 가진 사람은 누구나 본다.

(검색에는 안 나오니 안심해도 된다.)

(게시는 위 '0. 이 장의 새 단어'에 풀어 두었다.)

걸음 6 — 커스터마이즈로 개성 더하기

"구글 스타일로 디자인을 수정해 줘."     → 디자인이 바뀐다
"오늘의 할 일 목록을 추가해 줘."        → 할 일 위젯이 생긴다
"아이템을 한 열에 두 개씩 배치해 줘."   → 2열로 정리된다

(커스터마이즈는 0장 용어집에 있다.)

예시 폭격

예시 1 (완성예 — 완성된 페이지 모습)

여섯 걸음을 마치면 이런 페이지가 나온다.

┌────────────────┬────────────────┐
│   현재 시간     │  오늘의 할 일   │
│   12:19:57     │  □ 프로젝트 작성│
├────────────────┼────────────────┤
│  오늘의 날씨    │  최신 기술 뉴스 │
│   22°C 맑음    │  새 소식 두 줄  │
└────────────────┴────────────────┘
       Google 검색 바

코드는 한 줄도 안 쳤다.

말로만 시켰다.

예시 2 (부분완성)

게시 절차의 빈칸을 채워 보자.

  1. [____] 버튼 클릭 (답: 게시)

  2. [게시 및 링크 복사] 클릭

  3. 복사한 ____를 친구에게 전달 (답: 링크)

예시 3 (독립적용)

만든 페이지를 친구에게 보여 주고 싶다.

미리보기 창만 보여 주면 될까?

아니다.

[게시]를 눌러 링크를 만들어 전달해야 한다.

미리보기는 나만 보는 거울이고, 게시는 액자를 벽에 거는 것이다.

미니 시나리오 — 이럴 때 이렇게

페이지를 만들었는데 색이 너무 어둡다.

이럴 때는 새로 안 만든다.

그냥 "더 밝은 색으로 바꿔 줘"라고 말한다.

거울 앞에서 옷만 바꿔 입듯이.

4. 프롬프트가 곧 실력

막히는 장면

AI에게 "멋진 홈페이지 만들어 줘"라고 했더니, 내 마음과 전혀 다른 게 나온 적 있죠?

AI가 잘못한 게 아니다.

'멋지다'가 무슨 뜻인지 안 알려 줬을 뿐이다.

말을 구체적으로 바꾸면 결과가 확 달라진다.

그래서 프롬프트가 곧 실력이다.

비유 먼저 — 택시 행선지

택시에 타서 "좋은 데로 가 주세요"라고 하면 기사가 난감하다.

"서울역으로 가 주세요"라고 또렷이 대야 제대로 간다.

AI도 행선지(원하는 것)를 또렷이 대 줘야 제대로 데려다준다.

비유 코드(프롬프트) 위험
"좋은 데로" (모호) ai.ask("멋진 홈페이지") AI가 제멋대로 만듦
"서울역까지" (구체) ai.ask("밝고 깔끔한, 시계+검색바+기술뉴스") 원하는 결과에 가까움

한 문장 정의

좋은 프롬프트는 구체적이고 맥락이 또렷하며, 같은 AI라도 프롬프트가 결과의 질을 좌우한다.

(프롬프트는 0장 용어집에 있다.)

예시 폭격

예시 1 (완성예 — 나쁜 → 좋은 → 더 좋은)

같은 일을 시키는 세 가지 프롬프트를 견주자.

# 나쁜 프롬프트 — 막연함
ai.ask("홈페이지 만들어 줘")

# 좋은 프롬프트 — 구체적
ai.ask("서울 날씨와 기술 뉴스를 보여 주는 시작 페이지")

# 더 좋은 프롬프트 — 스타일 + 기능 + 콘텐츠
ai.ask("밝고 깔끔한 스타일. 시계와 검색바 추가. 기술 뉴스 표시.")

아래로 갈수록 원하는 결과에 가까워진다.

예시 2 (부분완성)

아래 모호한 프롬프트를 구체적으로 고쳐 보자.

모호 — "예쁜 페이지 만들어 줘"

구체 — "_ 스타일로, _ 기능을 넣어서 만들어 줘"

(빈칸 예: "밝고 깔끔한" / "시계와 검색바")

무엇을 넣을지 직접 적는 순간 결과가 또렷해진다.

예시 3 (독립적용)

다음 둘 중 더 좋은 프롬프트는?

(가) "괜찮은 거 하나 만들어 줘"

(나) "흰 배경에, 큰 시계 하나와 할 일 목록을 넣어 줘"

답은 (나)다.

행선지를 또렷이 댔기 때문이다.

미니 시나리오 — 이럴 때 이렇게

결과가 자꾸 엉뚱하게 나온다.

이럴 때는 AI를 탓하지 않는다.

내 프롬프트에 빠진 게 없는지 본다.

색, 기능, 분위기 — 빠진 칸을 채워 다시 시킨다.

단순 규칙

지금은 이 한 줄만 들고 가면 된다.

AI에게 시킬 땐 구체적으로, 한 번에 말고 작게 쪼개서, 결과는 꼭 눈으로 확인.

한 걸음 더 ▸ (지금 몰라도 됨)

"AI가 다 알아서 해 주니 확인은 안 해도 되지 않나?"는 아니다.

결과를 직접 보고 고치는 게 바이브 코딩의 절반이다.

이건 책을 따라가며 자연스레 몸에 밴다. 지금은 위 한 줄 규칙만 충분하다.

사이드박스 — '바이브 코딩'은 어디서 온 말? (흥미용, 건너뛰어도 됨)

2025년 안드레이 카파시(Andrej Karpathy)가 처음 꺼낸 말이다.

코드 문법을 따지기보다 "분위기(vibe)대로" AI에게 맡겨 만든다는 뜻이다. 외워 둘 필요는 없다.

부록 박스 — AI는 어떻게 여기까지 왔나? (참고용, 건너뛰어도 됨)

사람 뇌를 흉내 낸 작은 계산기(뉴럴넷, 1940년대)에서 출발했다.

이미지를 알아보는 눈(CNN), 그럴듯한 가짜를 그리는 화가(GAN), 문장 흐름을 읽는 독서가(RNN)를 거쳤다.

그 위에 중요한 단어에 집중하는 통역사(트랜스포머, 2017년 구글)가 나왔고, 오늘날의 LLM(클로드·ChatGPT)이 자랐다.

정리

핵심 셋만 남긴다.

  1. 바이브 코딩은 코드를 안 쓰고 AI와 말로 만든다. 도구는 웹 챗봇·모델 선택형·전용 모델형 셋이다.

  2. 클로드 아티팩트로 코드 한 줄 없이 첫 페이지를 만들고, 게시로 남에게 보여 줄 수 있다.

  3. 프롬프트가 구체적일수록 결과가 좋다. 한 번에 안 끝내고 말로 계속 고친다.

다음 장 예고 — 프롬프트를 더 잘 쓰는 방법을 다룬다. (지금 몰라도 됩니다.)

난이도
에피소드
질문
카드를 로딩 중...
답변

클릭하거나 Space를 눌러 뒤집기

0 / 0
학습 진도 0%
← → 이동   Space 뒤집기   R 셔플